<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div">
        <ul>
            <!-- for .x. in arr ... -->
            <li v-for="item in arr">{{item}}</li>
            <!-- 接收两个参数 -->
            <li v-for="(item,index) in arr">{{index}} - {{item}}</li>

            <!-- 遍历对象 -->
            <p v-for="val in obj">{{val}}</p>
            <p v-for="(val,key) in obj">{{key}} : {{val}}</p>
            <p v-for="(val,key,index) in obj">{{index}}   -  {{key}} : {{val}}</p>
        

            <!-- 遍历字符串 -->
            <p v-for="c in str">{{c}}</p>

            <!-- 分页效果 -->
            <a href="#" style="margin-left: 10px;" v-for="num in 10">{{num}}</a>
        </ul>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const app = Vue.createApp({

            data: function () {
                return {
                    arr:['cp','zy','zs','hw'],
                    obj:{
                        name:'cp',
                        age:18,
                        gender:'male'
                    },
                    str:'hello vue'
                }
            }
        }).mount('#div');
    </script>

</body>

</html>